<script setup lang="ts" name="userInfo">
import { onMounted, watch, ref } from 'vue'
import useUserinfoIndex from '@/views/hooks/userinfoIndex'
import UserTopLeft from '@/components/userinfo/userTopLeft.vue'
import UserTopRight from '@/components/userinfo/userTopRight.vue'
import UserBottomLeft from '@/components/userinfo/userBottomLeft.vue'
import UserBottomRight from '@/components/userinfo/userBottomRight.vue'
import { useCurrActStroe } from '@/stores/currActStore'
import { storeToRefs } from 'pinia'
import { useRoute } from 'vue-router'
const route = useRoute()
const { currUser } = storeToRefs(useCurrActStroe())
const { userInfo, userId, userInfoInit } = useUserinfoIndex()
watch(
  () => route.query,
  () => {
    userInfoInit(route.query.id as string)
  }
)

onMounted(() => {
  userInfoInit(route.query.id as string)
})
</script>

<template>
  <!--  -->
  <div id="aside-main-aside">
    <div class="aside"></div>
    <div class="main info">
      <div class="topLeft">
        <UserTopLeft :user="userInfo!.user" v-if="!!userInfo?.user" />
      </div>
      <div class="topRight">
        <UserBottomRight
          :isFollowed="userInfo!.isFollowed"
          v-if="!!userInfo?.isFollowed && currUser.id !== userId"
        />
      </div>
      <div class="bottomLeft">
        <UserBottomLeft
          :columns="userInfo!.columns"
          :articles="userInfo!.articles"
          v-if="!!userInfo?.columns"
        />
      </div>
      <div class="bottomRight">
        <UserTopRight :total="userInfo!.total" v-if="!!userInfo?.columns" />
      </div>
    </div>
    <div class="aside"></div>
  </div>
</template>

<style scoped lang="less">
.svg {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin: 0 4px;
}
.items {
  display: inline-flex;
  flex-wrap: wrap;
  vertical-align: middle;
  height: 100%;
  width: calc(100% - 126px);
  > p {
    margin: 8px 10px 0;
    height: 32px;
    > b {
      vertical-align: middle;
    }
  }
}

.info {
  background-color: var(--color1);
  display: grid;
  grid-template-columns: 8fr 2fr;
  grid-auto-rows: max-content;
  border: 2px dashed var(--color1);
  border-radius: var(--radius);
  .topLeft {
    border-right: 2px dashed var(--color2);
  }
  .topRight {
    border-bottom: 2px dashed var(--color2);
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 auto;
    justify-content: space-around;
  }
  .bottomLeft {
    border-top: 2px dashed var(--color2);
  }
  .bottomRight {
    border-left: 2px dashed var(--color2);
    padding: 10px;
  }
}
</style>
